<template>
  <view class="login">
    <view class="kongbai"> </view>
    <view class="getuser">
      <view class="getuserHeder">
        <text>头像</text>
        <button
          class="btn"
          open-type="chooseAvatar"
          @chooseavatar="getUserInfo"
        >
          <image
            :src="
              userInfo.avatarUrl
                ? userInfo.avatarUrl
                : 'https://img2.baidu.com/it/u=2893147358,3393430132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
            "
            mode="widthFix"
          ></image>
        </button>
      </view>

      <view class="getuserHeder">
        <text>昵称</text>
        <input
          type="nickname"
          class="weui-input"
          placeholder="请输入昵称"
          placeholder-style="font-size:24rpx;color:#ACACAC;text-align: right;"
          style="width: 172rpx; text-align: right"
          :value="userInfo.userName"
          @input="onInput"
          @blur="onblur"
        />
      </view>

      <view class="hint">
        <text>昵称限2-32个字符,一个汉字为两个字符</text>
        <van-button
          color="linear-gradient(to right, #4bb0ff, #6149f6)"
          @click="submit"
        >
          确认
        </van-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatarUrl: '',
        userName: ''
      }
    }
  },
  onLoad() {
    let userInfoVal = uni.getStorageSync('userInfo')
    if (userInfoVal) {
      this.userInfo = userInfoVal
    }
  },

  methods: {
    getUserInfo(e) {
      // console.log(e)
      this.userInfo.avatarUrl = e.detail.avatarUrl
    },
    onInput(v) {
      // console.log(v.detail.value)
      this.userInfo.userName = v.detail.value
    },
    onblur(e) {
      console.log(e)
      this.userInfo.userName = e.detail.value
    },
    submit() {
      let val = this.userInfo
      uni.setStorageSync('userInfo', val)
      uni.showLoading({
        title: '请稍等...'
      })
      setTimeout(() => {
        uni.hideLoading()
        uni.switchTab({
          url: './user'
        })
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 去掉背景色和内外边距 */
button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  position: static;
}

button:after {
  content: none;
}

/* 去掉边框 */
button::after {
  border: none;
}
/deep/ .van-button--normal {
  display: flex;
  justify-content: center;
  width: 600rpx;
  height: 80rpx;
  border-radius: 60rpx;
  margin-top: 40rpx;
}
.login {
  background-color: #f5f5f5;
  width: 100%;
  height: 100vh;
  .kongbai {
    padding: 14rpx;
    background-color: #f5f5f5;
  }
  .getuser {
    background-color: #ffffff;
    height: 100vh;
    margin: 0 10rpx;
    .getuserHeder {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      padding: 0 20rpx;
      border-bottom: 2rpx solid #f5f5f5;
      .btn {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .hint {
      text {
        margin: 0 20rpx;
        font-size: 24rpx;
        color: #c0c0c0;
      }
    }
  }
}
</style>
